<template>
  <div class="cool-card">

    <!--<el-card>-->
    <!--<div slot="header" class="clearfix">-->
    <!--<span>接口列表</span>-->
    <!--<el-button style="float: right; padding: 3px 2px;color: white" type="text">-->
    <!--添加方案-->
    <!--</el-button>-->
    <!--</div>-->
    <el-row>
      <!--<el-collapse v-model="activeSearch" @change="handleSearchVisible">-->
      <!--<el-collapse-item title="展开/收缩 搜索栏" name="1">-->
      <div class="search-section">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="应用名:">
            <!--<el-input size="small" v-model="searchForm.appName" placeholder="审批人"></el-input>-->
            <el-select v-model="searchForm.app_name" size="small" filterable placeholder="请选择应用名称">
              <el-option
                v-for="item in appNames"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="匹配路径:">
            <el-input size="small" v-model="searchForm.patterns_condition" placeholder="输入接口路径"></el-input>
          </el-form-item>
          <el-form-item label="方法类型:">
            <el-select v-model="searchForm.methods_condition" size="small" filterable placeholder="选择方法类型">
              <el-option :label="'GET'" :value="'GET'"></el-option>
              <el-option :label="'POST'" :value="'POST'"></el-option>
              <el-option :label="'PUT'" :value="'PUT'"></el-option>
              <el-option :label="'DELETE'" :value="'DELETE'"></el-option>
              <el-option :label="'所有'" :value="''"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="授权模式:">
            <el-select v-model="searchForm.grant_level" size="small" filterable placeholder="请选择授权模式">
              <el-option :label="'开放接口'" :value="0"></el-option>
              <el-option :label="'需登录'" :value="1"></el-option>
              <el-option :label="'需授权'" :value="2"></el-option>
              <el-option :label="'所有'" :value="''"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类名:">
            <el-input size="small" v-model="pagingParams.controller_name" placeholder="输入控制器名称"></el-input>
          </el-form-item>
          <el-form-item label="接口说明:">
            <el-input size="small" v-model="searchForm.memo" placeholder="请输入接口说明"></el-input>
          </el-form-item>
          <el-form-item label="Manual:">
            <el-switch
              v-model="searchForm.manual"
              @change="loadActionsWithPage"
            >
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
              <el-button size="mini" type="primary" @click="addActionDialogVisible = true">新增</el-button>
              <el-button type="primary" size="mini" @click="onClearSearchForm">刷新</el-button>
            </el-button-group>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="success" @click="onReloadAllActions">重载</el-button>
          </el-form-item>
          <!--<el-form-item>
          <el-button size="mini" type="success" @click="dialogVisible = true">打开图床</el-button>
        </el-form-item>
          <el-form-item>
            <el-button size="mini" type="success" @click="test">获取选中图</el-button>
          </el-form-item>-->
        </el-form>
      </div>
      <!--</el-collapse-item>-->
      <!--</el-collapse>-->
    </el-row>
    <el-row>
      <el-card>
        <el-table v-loading="loadingTable"
                  :data="actions"
                  size="small"
                  ref="actionsTable"
                  row-key="id"
                  class="actions-table">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="控制器类名:">
                      <span>{{ props.row.controllerName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="方法名称:">
                      <span>{{ props.row.methodName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="参数限定符:">
                      <span>{{ props.row.paramsCondition }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="请求头限定符:">
                      <span>{{ props.row.headersCondition }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="消费方数据格式:">
                      <span>{{ props.row.consumesCondition }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="生产方数据格式:">
                      <span>{{ props.row.producesCondition }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="创建时间:">
                      <span>{{ props.row.createTime |dateFormatMin }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="创建者:">
                      <span>{{ props.row.createUserId }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="更新者:">
                      <span>{{ props.row.updateUserId }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="更新时间:">
                      <span>{{ props.row.updateTime |dateFormatMin }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="接口说明:">
                      <span>{{ props.row.memo }}</span>
                    </el-form-item>
                  </el-col>
                    <el-col :span="8">
                      <el-form-item label="超时时间(ms):">
                        <span>{{ props.row.connectionTimeout }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="熔断时间(ms):">
                        <span>{{ props.row.hystrixTimeout }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="重试次数:">
                        <span>{{ props.row.retryTimes }}</span>
                      </el-form-item>
                    </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column align="center" label="ID" prop="id" width="70"/>
          <el-table-column align="center" label="服务名" prop="appName" width="120"/>
          <el-table-column align="center" label="方法类型" prop="methodsCondition" width="90"/>
          <el-table-column align="center" label="匹配路径" prop="patternsCondition" width="250"/>
          <el-table-column align="center" label="参数限定" show-overflow-tooltip  prop="paramsCondition"/>
          <el-table-column align="center" label="安全级别" prop="grantLevel">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.grantLevel == 0"
                      :effect="'plain'"
                      size="mini"
                      type="danger">
                开放接口
              </el-tag>
              <el-tag v-if="scope.row.grantLevel == 1"
                      :effect="'plain'"
                      size="mini"
                      type="warning">
                需登录
              </el-tag>
              <el-tag v-if="scope.row.grantLevel == 2"
                      :effect="'plain'"
                      size="mini"
                      type="info">
                需授权
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Manual">
            <div slot-scope="scope" style="font-size: 22px;">
                <template v-if="(scope.row.createUserId+scope.row.updateUserId) == 0"><i class=el-icon-sort style="color:#909399;"></i></template>
                <template v-if="(scope.row.createUserId+scope.row.updateUserId) > 0"><i class="el-icon-s-custom" style="color: red;font-weight: bolder;"></i></template>
            </div>
          </el-table-column>
          <el-table-column align="center" label="接口说明" show-overflow-tooltip prop="memo"/>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
            <el-button-group>
              <el-button
                  size="mini"
                  @click="openUrl('/gateway/actions/detail?id='+scope.row.id)"
                >编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="onDeleteAction(scope.row.id)"
                >删除
                </el-button>
            </el-button-group>

            </template>
          </el-table-column>

          <!--<el-table-column align="center" label="方法名称" prop="methodName"/>-->
          <!--<el-table-column align="center" label="控制器类名" prop="controllerName"/>-->
          <!--<el-table-column align="center" label="paramsCondition" prop="paramsCondition"/>-->
          <!--<el-table-column align="center" label="consumesCondition" prop="consumesCondition"/>-->
          <!--<el-table-column align="center" label="producesCondition" prop="producesCondition"/>-->
          <!--<el-table-column align="center" label="创建时间" prop="createTime">
            <template slot-scope="scope">
              {{scope.row.createTime | dateFormatMin}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="更新时间" prop="updateTime">
            <template slot-scope="scope">
              {{scope.row.updateTime | dateFormatMin}}
            </template>
          </el-table-column>-->


        </el-table>

      </el-card>
    </el-row>
    <el-row>
      <el-pagination
        class="page-section"
        background
        hide-on-single-page
        @current-change="onPaging"
        @size-change="handleSizeChange"
        layout="sizes,prev, pager, next"
        :total="pagingParams.total"/>
    </el-row>
    <!--</el-card>-->
    <!--新增模态框-->
    <el-dialog :visible.sync="addActionDialogVisible"
               title="新增接口" :width="$store.getters.inMobile == true ? '100%' : '50%'" class="dialog">
      <div class="dialog-body">
          <el-form ref="addAction" :model="addActionModel" label-width="100px" label-position="left">
            <el-form-item label="应用名称:">
              <el-select v-model="addActionModel.appName" size="small" filterable placeholder="请选择应用名称">
                <el-option
                  v-for="item in appNames"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="匹配路径:">
              <!--<el-input v-model="addActionModel.patternsCondition"></el-input>-->
              <el-select
                v-model="addActionModel.patternsCondition"
                multiple
                filterable
                allow-create
                placeholder="请输入路径，可多个">
                <el-option
                  v-for="item in ac_options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方法类型:">
              <el-checkbox-group v-model="addActionModel.methodsCondition" size="small">
                <el-checkbox  label="GET" >GET</el-checkbox>
                <el-checkbox  label="POST" >POST</el-checkbox>
                <el-checkbox  label="PUT" >PUT</el-checkbox>
                <el-checkbox  label="DELETE" >DELETE</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="接口安全级别:">
              <el-radio-group v-model="addActionModel.grantLevel" size="small">
                <el-radio :label="0" border>开放接口</el-radio>
                <el-radio :label="1" border>需登录</el-radio>
                <el-radio :label="2" border>需授权</el-radio>
              </el-radio-group>
              <div class="hint-title">[需授权]表示需要给用户角色赋予该权限才可访问</div>
            </el-form-item>
            <el-form-item label="接口说明:">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入接口说明"
                v-model="addActionModel.memo">
              </el-input>
            </el-form-item>
          </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addActionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddAction" :loading="onAddActionLoading">确 定</el-button>
      </div>
    </el-dialog>
    <!--图床-->
    <el-dialog title="图床"
               :visible.sync="dialogVisible" width="75%">

      <gallery :multiple="true" v-bind:imageData.sync="imageData">

      </gallery>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">选中图片</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  import {addAction, deleteActionById, getActionsWithPage, getAppNames, resetRoleActions} from "../../api/action-api";
  import Gallery from '../layout/components/Gallery'

  export default {
    name: "ActionMapping",
    components: {
      Gallery
    },
    data() {
      return {
        imageData:'',
        dialogVisible:false,
        pagingParams: {//分页查询参数
          controller_name: '',
          current: 1,
          size: 10,
          orders: '!create_time',
          total: 0,//总数量
          pages: 0,//总页数

        },
        actions: [],
        loadingTable: false,
        searchForm: {
          app_name: '',
          patterns_condition: '',
          methods_condition: '',
          memo: '',
          grant_level: '',
          manual:false,
        },
        activeSearch: [],
        appNames: [
          'god-soa',
          'gateway-soa'
        ],
        addActionDialogVisible:false,
        onAddActionLoading:false,
        ac_options:[],
        addActionModel:{
          memo:'',
          patternsCondition:[],
          methodsCondition:[],
          grantLevel:2,
        }
      }
    },
    methods: {
      test() {
        console.log(this.imageData)
      },
      handleSearchVisible(val) {
        //折叠搜索框
        console.log(val)
      },
      openUrl(url) {
        window.open(url,'_blank')
      },
      onDeleteAction(actionId) {
        this.$confirm('确定要删除该接口吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          deleteActionById(actionId).then(() => {
            this.$message.success("删除成功")
            this.loadActionsWithPage()
          })
        })

      },
      //页面切换
      onPaging(currentPage) {
        this.pagingParams.current = currentPage
        this.loadActionsWithPage()
      },
      handleSizeChange(val) {
        //页大小编号
        this.pagingParams.size = val
        this.loadActionsWithPage()
      },
      //搜索
      onSearch() {
        this.loadActionsWithPage()
      },
      onAddAction() {
        this.addActionModel.methodsCondition = JSON.stringify(this.addActionModel.methodsCondition)
        this.addActionModel.patternsCondition = JSON.stringify(this.addActionModel.patternsCondition)
        addAction(this.addActionModel).then(res =>{
          this.$message.success("操作成功")
          this.addActionDialogVisible = false
          this.loadActionsWithPage();
        })

      },
      //重载所有接口信息
      onReloadAllActions() {
        this.$loading()
        resetRoleActions("actions").then(res =>{
          this.$notify.success("所有接口已重载");
          this.$loading().close()
        }).catch(()=>{
          this.$loading().close()
        })
      },
      //清空搜索条件
      onClearSearchForm() {
        this.searchForm = {
          app_name: '',
          patterns_condition: '',
          memo: '',
          need_grant: ''
        }
        this.loadActionsWithPage()
      },
      //获取接口数据
      loadActionsWithPage() {
        this.loadingTable = true
        getActionsWithPage({...this.pagingParams, ...this.searchForm}).then(res => {
          this.actions = res.records
          this.pagingParams.current = res.current
          this.pagingParams.pages = res.pages
          this.pagingParams.total = res.total
          this.loadingTable = false

        }).catch(() => {
          this.loadingTable = false
        })
      },
      //获取应用名字
      loadAppNames() {
        getAppNames().then(res => {
          this.appNames = res
          console.log(res)
        })
      }
    },
    created() {
      this.loadActionsWithPage()
      this.loadAppNames()
    }
  }
</script>

<style scoped>


  .page-section {
    margin-top: 10px;
    float: right;
  }

  .actions-table >>> .el-form-item {
    margin-bottom: 0px;
  }

  .actions-table >>> .el-form--inline .el-form-item {
    margin-right: 40px;
  }

  .actions-table >>> .el-form-item__label {
    /*color: #E6A23C;*/
  }

  .search-section >>> .el-form-item {
    margin-bottom: 8px;
  }
</style>
